<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		
		<van-nav-bar class="navTop" :title="$t('header.Asset_details')" left-arrow=""  @click-left="navLeft" ></van-nav-bar>
		
		<div class="main">
			<div class="block">
				<div class="num">{{userData.balance}}</div>
				<span class="label">{{$t('page.Assets')}} (USDT)</span>
				<div class="fbyn">
					<div class="btn btn-c-lan" @click="record(1)">{{$t('page.Recharge_jl')}}</div>
					<div class="btn on" @click="record(2)" >{{$t('page.Withdrawal_jl')}}</div>
				</div>
			</div>
			
			<div class="tab">
				<div @click="Tab(1)" :class="['li' , tab_i == 1 ? 'on':'']" >
					{{$t('page.Total_revenue_record')}}
				</div>
				<div @click="Tab(2)" :class="['li' , tab_i == 2 ? 'on':'']" >
					{{$t('page.Yesterday_earnings')}}
				</div>
				<div :class="['line','btn-c-lan', tab_i == 2 ? 'on':'']"></div>
			</div>
			
			<div class="order" v-if="tab_i == 1 " >
				<div class="li" v-for="item in moneyData">
					<div class="l">
						<p class="name">{{item.change_type}}</p>
						<span class="tiem">{{item.change_time}}</span>
					</div>
					<div class="r add" >
						<!-- {{item.change_amount}} -->
						<p class="money">{{item.change_amount}}</p>
						<span class="tiem">{{item.desc}}</span>
					</div>
				</div>
			</div>
			<div class="order" v-else>
				
				
				<div class="li">
					<div class="l">
						<!-- 基础收益 -->
						<p class="name">{{$t('page.Basic_income')}}</p>
					</div>
					<div class="r add" >
						<p class="money">{{YestoData.basic_income ? YestoData.basic_income : "0"}}</p>
					</div>
				</div>
				<div class="li">
					<div class="l">
						<!-- 跟单收益 -->
						<p class="name">{{$t('page.Documentary_income')}}</p>
					</div>
					<div class="r add" >
						<p class="money">{{YestoData.gd_income? YestoData.gd_income :'0'}}</p>
					</div>
				</div>
				<div class="li">
					<div class="l">
						<!-- 代理分红 -->
						<p class="name">{{$t('page.Agency_dividend')}}</p>
					</div>
					<div class="r add" >
						<p class="money">{{YestoData.dl_income ? YestoData.dl_income :'0'}}</p>
					</div>
				</div>
				<div class="li">
					<div class="l">
						<!-- 昨日总收益 -->
						<p class="name">{{$t('page.Total_earnings_yesterday')}}</p>
					</div>
					<div class="r add" >
						<p class="money">{{YestoData.total_income ? YestoData.total_income : '0'}}</p>
					</div>
				</div>
			</div>
			
		</div>
		
		<Recharge ref='chongzhi'></Recharge>
		
		<Withdrawal ref='tixian'></Withdrawal>
	</div>
</template>

<script>
	
	import Withdrawal from "../../components/Withdrawal.vue"
	import Recharge from "../../components/Recharge.vue"
	
	import {mapState} from "vuex";
	import store from '@/store'
	 import Web3 from "web3";
	export default {
		name:"asset",
		components:{Withdrawal ,Recharge},
		data() {
			return {
				moneyData:[],
				YestoData:[],
				userData:{},
				
				address:'',
				tab_i : 1
			}
		},
	
		mounted(){
			this.userData = this.$store.state.user;
			this.exData(this.$dapp.getAddress())
			this.YestoDay(this.$dapp.getAddress())
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				// this.$parent.UserInfo(this.$dapp.getAddress())
				this.userData = e
				
				this.exData(this.$dapp.getAddress())
				this.YestoDay(this.$dapp.getAddress())
				
				this.$forceUpdate();
			}
		},
	
		methods: {
			record(i){
				this.$router.push({
					name:'record',
					query:{
						tab: i
					}
				})
			},
			
			Tab(e){
				this.tab_i = e;
			},
			  
			navLeft(){
				 this.$router.go(-1);//返回上一层
			},
			
			
			async exData(e){
				if(e){
					const { err, res } = await this.$request.get("/chss/bill/balance_change_record", {
						address:e
					});
					if (err === null) {
						console.log(res)
						this.moneyData = res;
					}
				}
			},
			
			async YestoDay(e){
				if(e){
					const { err, res } = await this.$request.get("/chss/bill/income_yestoday", {
						address:e
					});
					if (err === null) {
						console.log(res)
						this.YestoData = res;
					}
				}
			},
			
			
			opRecharge(){
				this.$refs.chongzhi.show();
			},
			opWithdrawal:function(){
				this.$refs.tixian.show();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{overflow: scroll;}
	.tab{
		position: relative; z-index: 1;
		height: 80px; line-height: 80px;
		overflow: hidden; box-sizing: border-box;
		color: #FFF;
		border-bottom: 4px solid #268cfa;
		margin: 30px;
		display: flex;
		
		.li{
			flex:1; text-align: center;
			&.on{color: #333;}
		}
		
		.line{
			position: absolute; z-index: -1;
			 width: 50%;
			left: 0%; bottom: -10px;
			height: 90px; border-radius: 10px;
			transition:all 0.3s;
			-moz-transition:all 0.3s;
			-webkit-transition:all 0.3s;
			-o-linear-transition:all 0.3s;
			
			&.on{left: 50%;}
		}
		
	}
	
	
	.block{
		padding: 100px 0px;
		margin: 30px; border-radius: 20px;
		background: #1256d5;
		text-align: center;
		color: #cca837; font-size: 50px;
		
		.label{
			font-size: 28px; color:#3082ec;
			display: block;
		}
		
		.fbyn{
			font-size: 30px; color:#333;
			position: relative; top:50px;
			text-align: center;
			.btn{
				height: 80px; line-height: 80px; 
				border-radius: 50px; margin: 0px 30px;
				width: 250px;
				display: inline-block; 
				&.on{border: 3px solid #07ACCA; color:#FFF; box-sizing: border-box;}
			}
		}
	}
	
	.order{
		padding:0px 30px;
		.li{
			display: flex;
			border: 2px solid #07ACCA;
			margin: 30px 0px;
			border-radius: 10px;
			padding:20px 30px ;
			background: rgba(0 , 0 , 0 , 0.8);
			
			.l{
				flex: 1;
				.name{line-height: 50px; font-size: 30px; }
				.tiem{height: 30px; line-height: 30px;font-size: 24px; color:#aaa; }
			}
			.r{
				text-align: right;
				.money{line-height: 50px; font-size: 35px;color: #d6c934; }
				.tiem{height: 30px; line-height: 30px;font-size: 24px; color:#aaa; }
				// &.add{color: #d6c934;}
			}
			
		}
	}
	
	
</style>
